<template>
  <el-row class="welcome">
    <el-row class="image-block exit-abs">
      <el-image class="animate-show-up" :src="background_image_url" />
    </el-row>

    <el-row class="welcome-block exit-blk">
      <el-row class="hero-image-block animate-pop-in _delay-2">
        <el-image class="hero-image" :src="hero_image_url" />
      </el-row>
      <el-row class="hero-title animate-pop-in _delay-3">
        HoloScope
      </el-row>
      <el-row class="hero-subtitle animate-pop-in _delay-4">
        Customized Analysis of your Open Source Repository Here
      </el-row>
    </el-row>

    <el-row class="btn-block exit-abs">
      <el-button class="btn-see-more animate-pop-in _delay-5" @click="see_more">
        Click to See More
      </el-button>
    </el-row>
    <el-row class="arrow-block exit-down">
      <el-image class="arrow-image animate-show-bottom" :src="arrow_image_url" fit="contain"/>
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: 'Welcome',
  data() {
    return {
      background_image_url: require('../../assets/welcome/welcome_background.png'),
      hero_image_url: require('../../assets/welcome/logo.png'),
      arrow_image_url: require('../../assets/welcome/arrow.svg'),
    }
  },
  methods: {
    see_more: function () {
      // 动效
      let exit_dom_abs = document.getElementsByClassName('exit-abs')
      for (let i=0; i<exit_dom_abs.length; i++) {
        exit_dom_abs[i].style.top = '-100vh'
      }
      let exit_dom_blk = document.getElementsByClassName('exit-blk')
      for (let i=0; i<exit_dom_blk.length; i++) {
        exit_dom_blk[i].style.margin = '-100vh 0 0 0'
      }
      let exit_dom_down = document.getElementsByClassName('exit-down')
      for (let i=0; i<exit_dom_down.length; i++) {
        exit_dom_down[i].style.top = '100vh'
        exit_dom_down[i].style.opacity = '0'
      }
      // 跳转
      setTimeout(() => {
        this.$router.push('/home')
      }, 600)
    }
  },
  mounted() {

  },
}
</script>

<style scoped>
.welcome {
  margin: -8px;
}

.image-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.hero-image-block {
  margin-top: 10vh;
}

.welcome-block {
  overflow-x: hidden;
  overflow-y: hidden;
}
.welcome-block .hero-image {
  margin-top: 2vh;
  height: 15vw;
  width: 15vw;
}
.welcome-block .hero-title {
  font-size: 5.5vw;
  font-weight: bold;
  color: #fafafa;
  margin-top: 8vh;
}
.welcome-block .hero-subtitle {
  font-size: 2.5vw;
  font-weight: bold;
  color: #fafafa;
  margin-top: 5vh;
}

.btn-block {
  position: absolute;
  left: 37vw;
  top: 76vh;
}
.btn-block .btn-see-more {
  background-color: #0e90ff;
  border: none;
  color: #fafafa;
  font-size: 2vw;
  font-weight: bold;
  width: 26vw;
  height: 3.7vw;
}
.btn-block .btn-see-more:hover {
  background-color: #1ea4ff;
  text-decoration: underline;
  margin-top: -0.05vw;
}
.btn-block .btn-see-more:active {
  background-color: #0e90ff;
  text-decoration: underline;
  margin-top: 0.05vw;
}

.arrow-block {
  position: absolute;
  left: 47.5vw;
  width: 5vw;
  top: 92vh;
}

.welcome-block ._delay-2 {
  animation-delay: .2s;
}
.welcome-block ._delay-3 {
  animation-delay: .3s;
}
.welcome-block ._delay-4 {
  animation-delay: .4s;
}
.welcome-block ._delay-5 {
  animation-delay: .5s;
}

.exit-abs {
  transition: all .6s ease-in;
}
.exit-blk {
  transition: all .3s ease-in;
}
.exit-down {
  transition: all .3s ease-in;
}

.animate-pop-in {
  animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
  opacity: 0;
}
.animate-show-up {
  animation: fade-slide-down 2s 0s cubic-bezier(0, 0.5, 0, 1) forwards;
}
.animate-show-bottom {
  animation: fade-slide-up .5s 0.6s ease-out forwards, wave 2s 1.2s ease-out infinite;
  opacity: 0;
}

/* Animations */
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-4vh) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10vh);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-slide-up {
  0% {
    opacity: 0;
    transform: translateY(4vh);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
    transform: none;
  }
  50% {
    opacity: .9;
    transform: scale(.9);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes wave {
  0% {
    opacity: 1;
    transform: none;
  }
  50% {
    opacity: 1;
    transform: translateY(1vh);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
</style>
